<template>
	 
	   
	   <div class="contain" style="padding-left: 30px; height: 80%;width: 95%; ;border-radius: 12px;margin-left: 16%;margin-top:10%;  box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.6);    ">
		   <div>
			   <div>
				   <img :src="money1" alt="Logo Icon" class="money" />  
			   </div>
		     <div class="title-mypurse" style="text-align: center;font-size: 20px;font-weight: 900;margin-top: 2%;">我的钱包</div>
			 <div style="display: flex;margin-top: 4%;">
				 <!-- <div style="font-size: 36px;margin-top: 1.6%;">账户余额（元）:</div> -->
				 <div style="font-size: 55px;margin-left: 32%;"> ¥{{ userStore.loginUser.account }}</div>
			 </div>
			 <div style="display: flex;align-items: center;margin-left: 10%;">
				 <div style="margin-top: 3%;font-size: 20px;">充值额度:</div>
				 <div style="margin-top: 3%;margin-left: 5%;">
					<el-form ref="moneyRef" :model="money" :rules="rules" style="display: flex;margin-top: 8px;">
						<el-form-item prop="price">
					  <el-input style="width: 240px;height: 50px;"  v-model="money.count" placeholder="输入充值金额"></el-input> 
						 </el-form-item>
						 <el-button  @click="recharge" type="success" style="width: 120px;height: 50px;border-radius: 10px;">充值</el-button> 
						
						 </el-form>
				 </div>
				
			 </div>
		    <div style="text-align: center;margin-top: 40px;">
				<p v-if="rechargeMessage" style="color: red;font-size: 30px;">{{ rechargeMessage }}</p>  
			</div>
		    
		     </div>.
		   </div>  
	 
</template>

<script setup>
import {ref ,reactive, computed} from 'vue' 
import { Path } from "@/constant/index"
import { get,post } from "@/plugins/axios"
import money1 from '@/components/components-zjm/money.png'; 
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/pinia'
const userStore = useUserStore() 
let rechargeMessage = ref(''); 
const money = ref({
	count:''
})
const  moneyRef =ref()
const rules = reactive({
    count: [{ required: true, message: '请输入充值金额', trigger: 'blur' }, { validator: validatePrice, trigger: 'blur' }]
});
const user = ref({})
user.value = userStore.loginUser
		// 充值函数  
const recharge = () => {  
		post(Path.userRecharge,{
			count: money.value.count
		},content => {
			userStore.setLoginUser()
			user.value = userStore.loginUser
		})
}; 
function validatePrice(rule, value, callback) {
    if (!isNaN(value) && !isNaN(parseFloat(value)) && parseFloat(value) > 0) {
        callback();
    } else {
        callback(new Error('金额必须是有效数字!'));
    }
}




</script>

<style scoped lang="scss">
	::v-deep .el-input__wrapper {
	background-color: #f2f4f7;
	border-radius: 5px;
	border: 1px solid #dcdfe6; // 添加默认边框
	border-radius: 8px;
	}
	::v-deep .el-input__wrapper:hover {
	background-color: #ffffff;
	border-color: #409eff; 
	transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
	}
	.money{
		width: 100px;
		height: auto;
		margin-left: 42%;
		margin-top: 3%;
	}
</style>